<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评估测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #6a25b3;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            background-color: white;
            border-radius: 32px;
            width: 100%;
            height: 100%;
            max-width: 1000px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .header {
            padding: 20px;
            border-bottom: 1px solid #f0f0f0;
        }

        .header h1 {
            font-size: 32px;
            margin-bottom: 10px;
            color: #333;
        }

        .header p {
            color: #666;
            font-size: 14px;
        }

        .test-modules {
            padding: 20px;
        }

        .module-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .module {
            flex: 1;
            min-width: 300px;
            background-color: #f9f9f9;
            border-radius: 36px;
            padding: 30px;
            margin-bottom: 15px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        }

        .module-title {
            font-size: 18px;
            margin-bottom: 8px;
            color: #333;
        }

        .module-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 15px;
        }

        .start-btn {
            background-color: #2196F3;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            float: right;
            text-decoration: none;
            display: inline-block;
        }

        .completed-btn {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: default;
            font-size: 14px;
            float: right;
            text-decoration: none;
            display: inline-block;
        }

        .submit-btn {
            background-color: #FF9800;
            color: white;
            border: none;
            padding: 12px 0;
            width: 100%;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
            text-align: center;
            display: block;
            text-decoration: none;
        }

        .refresh-btn {
            background-color: #9C27B0;
            color: white;
            border: none;
            padding: 12px 0;
            width: 100%;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
            text-align: center;
            display: block;
            text-decoration: none;
        }

        .top-modules {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .bottom-modules {
            display: flex;
            justify-content: space-between;
        }

        .module-content {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>评估测试</h1>
            <p>职业画像 精准匹配</p>
        </div>

        <div class="test-modules">
            <div class="module-container top-modules">
                <div class="module">
                    <div class="module-title">常识题</div>
                    <div class="module-desc">作答时间：约3分钟</div>
                    <a href="{% url 'questionnaire:question_test' 'q1' %}" class="start-btn" id="q1-btn">开始测试</a>
                </div>

                <div class="module">
                    <div class="module-title">判断推理</div>
                    <div class="module-desc">作答时间：约2分钟</div>
                    <a href="{% url 'questionnaire:question_test' 'q2' %}" class="start-btn" id="q2-btn">开始测试</a>
                </div>
            </div>

            <div class="module-container bottom-modules">
                <div class="module">
                    <div class="module-title">数量关系</div>
                    <div class="module-desc">作答时间：约4分钟</div>
                    <a href="{% url 'questionnaire:question_test' 'q3' %}" class="start-btn" id="q3-btn">开始测试</a>
                </div>

                <div class="module">
                    <div class="module-title">言语理解与表达</div>
                    <div class="module-desc">作答时间：约3分钟</div>
                    <a href="{% url 'questionnaire:question_test' 'q4' %}" class="start-btn" id="q4-btn">开始测试</a>
                </div>

                <div class="module">
                    <div class="module-title">资料分析</div>
                    <div class="module-desc">作答时间：约5分钟</div>
                    <a href="{% url 'questionnaire:question_test' 'q5' %}" class="start-btn" id="q5-btn">开始测试</a>
                </div>
            </div>

            <a href="{% url 'questionnaire:get_all_results' %}" class="submit-btn" id="submit-btn">一键提交</a>
            <a href="javascript:void(0)" class="refresh-btn" id="refresh-btn">重新答题</a>
        </div>
    </div>

    <!-- 新增：提交遮罩层 -->
    <div id="submit-mask" style="display:none;position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:9999;background:rgba(0,0,0,0.4);">
        <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:40px 60px;border-radius:16px;font-size:22px;color:#6a25b3;box-shadow:0 2px 16px rgba(0,0,0,0.2);">
            正在提交问卷，请稍候…
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 检查每个题型是否已完成
            checkCompletedTests();
            
            // 刷新按钮
            const refreshBtn = document.getElementById('refresh-btn');
            refreshBtn.addEventListener('click', function() {
                // 清除所有测试结果的会话存储
                clearTestResults();
                // 刷新页面
                location.reload();
            });
            // 一键提交按钮提示
            document.getElementById('submit-btn').addEventListener('click', function(e) {
                document.getElementById('submit-mask').style.display = 'block';
            });
        });
        
        // 检查已完成的测试
        function checkCompletedTests() {
            // 检查会话存储中的测试结果
            const testTypes = ['q1', 'q2', 'q3', 'q4', 'q5'];
            
            testTypes.forEach(type => {
                // 使用AJAX检查是否完成了该题型
                fetch(`/questionnaire/check_completed/${type}/`, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.completed) {
                        // 更新按钮样式和文本
                        const btn = document.getElementById(`${type}-btn`);
                        btn.textContent = '已完成';
                        btn.classList.remove('start-btn');
                        btn.classList.add('completed-btn');
                    }
                })
                .catch(error => {
                    console.error('检查测试完成状态失败:', error);
                });
            });
        }
        
        // 清除测试结果
        function clearTestResults() {
            fetch('/questionnaire/clear_results/', {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': getCookie('csrftoken')
                }
            })
            .then(response => response.json())
            .then(data => {
                console.log('测试结果已清除');
            })
            .catch(error => {
                console.error('清除测试结果失败:', error);
            });
        }
        
        // 获取CSRF令牌
        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    </script>
</body>
</html>